<template>
    <div class="dashboard-editor-container">
        <!-- style="" -->
        <div class="top-border">
            <div class="li-title">常用功能</div>
            <div class="common-border">
                <router-link v-for="(item, index) in commonList" :key="item" :to="item.url">
                    <div class="common-title">
                        <span>{{ item.name }}</span>
                        <span class="common-icon iconfont" :class="item.icon"></span>
                    </div>
                </router-link>
            </div>
        </div>

        <el-row :gutter="32">
            <el-col :xs="24" :sm="24" :lg="12">
                <div class="li-border">
                    <div class="li-title">系统通知</div>
                    <div class="li-content-border" v-loading="noticeLoading">
                        <template v-show="noticeList.length > 0">
                            <div class="li-content" v-for="(item, index) in noticeList" :key="index">
                                <div class="note">{{ item.noticeTitle }}</div>
                                <div class="time">{{ parseTime(item.createTime, '{y}-{m}-{d}') }}</div>
                            </div>
                        </template>
                        <el-empty v-show="noticeList.length == 0" description="研发中..."></el-empty>
                    </div>
                </div>
            </el-col>
            <el-col :xs="24" :sm="24" :lg="12">
                <!-- 系统提醒 -->
                <system-warn></system-warn>
            </el-col>
        </el-row>
        <el-row :gutter="32">
            <el-col :xs="24" :sm="24" :lg="12">
                <div class="li-border">
                    <div class="li-title">待办事项</div>
                    <div class="li-content-border">
                        <!-- <div class="li-content" v-for="i in 3">
                          <div class="note">【龄期提醒】YP-202407-TYH-LJ3-112(28天强度)</div>
                          <div class="time">2024-8-20</div>
                        </div> -->
                        <el-empty description="研发中..."></el-empty>
                    </div>
                </div>
            </el-col>
            <el-col :xs="24" :sm="24" :lg="12">
                <div class="li-border">
                    <div class="li-title">试验统计</div>
                    <div class="li-content-border">
                        <bar-chart/>
                    </div>
                </div>
            </el-col>
        </el-row>

    </div>
</template>

<script>
import {listNotice} from "@/api/system/notice";

import PanelGroup from './dashboard/PanelGroup';
import LineChart from './dashboard/LineChart';
import RaddarChart from './dashboard/RaddarChart';
import PieChart from './dashboard/PieChart';
import BarChart from './dashboard/BarChart';
import {systemWarn} from "@/views/home";

const lineChartData = {
    newVisitis: {
        expectedData: [100, 120, 161, 134, 105, 160, 165],
        actualData: [120, 82, 91, 154, 162, 140, 145]
    },
    messages: {
        expectedData: [200, 192, 120, 144, 160, 130, 140],
        actualData: [180, 160, 151, 106, 145, 150, 130]
    },
    purchases: {
        expectedData: [80, 100, 121, 104, 105, 90, 100],
        actualData: [120, 90, 100, 138, 142, 130, 130]
    },
    shoppings: {
        expectedData: [130, 140, 141, 142, 145, 150, 160],
        actualData: [120, 82, 91, 154, 162, 140, 130]
    }
};

export default {
    name: 'Index',
    components: {
        PanelGroup,
        LineChart,
        RaddarChart,
        PieChart,
        BarChart,
        systemWarn
    },
    data() {
        return {
            commonList: [
                {
                    name: "试验任务", icon: "icon-shiyantaizhang1", url: '/syrw/bsDataReport'
                },
                {name: "表单打印", icon: "icon-caidanbiaodandayin", url: 'syrw/biExcelType'},
                {name: "进场台账", icon: "icon-cailiaotaizhang", url: '/ycl/bsJctz'},
                {name: "试验台账", icon: "icon-shiyanrenwuguanli", url: '/statistics/sytz'},
            ],
            lineChartData: lineChartData.newVisitis,
            noticeLoading: false,
            afficheLoading: false,
            noticeList: [],
            afficheList: []
        };
    },
    created() {
        this.getNoticeList();
        this.getAfficheList();
    },
    methods: {
        handleSetLineChartData(type) {
            this.lineChartData = lineChartData[type];
        },
        /** 查询通知列表 */
        getNoticeList() {
            this.noticeLoading = true;
            const param = {
                pageNum: 1,
                pageSize: 10,
                noticeType: 1
            };
            listNotice(param).then((response) => {
                this.noticeList = response.rows;
                this.noticeLoading = false;
            });
        },
        /** 查询公告列表 */
        getAfficheList(type) {
            this.afficheLoading = true;
            const param = {
                pageNum: 1,
                pageSize: 10,
                noticeType: 2
            };
            listNotice(param).then((response) => {
                this.afficheList = response.rows;
                this.afficheLoading = false;
            });
        },
    }
};
</script>

<style lang="scss" scoped>
.dashboard-editor-container {
  padding: 32px;
  background-color: rgb(240, 242, 245);
  position: relative;

  .chart-wrapper {
    background: #fff;
    padding: 16px 16px 0;
    margin-bottom: 32px;
  }
}

.top-border {
  .common-border {
    padding: 16px;
    display: flex;

    .common-title {
      margin-right: 30px;
      width: 202px;
      height: 80px;
      border: 1px solid #409EFF75;
      border-radius: 4px;
      background-color: #d9ecff75;
      color: #409EFF;
      font-size: 22px;
      line-height: 2;
      line-height: 80px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 20px;

      &:hover {
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
      }
    }

    .common-icon {
      font-size: 30px;
    }
  }
}


.li-border,
.top-border {
  position: relative;
  // padding: 16px;
  margin-bottom: 32px;
  background-color: #ffffff;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);

  &.li-border {
    height: 380px;
  }

  .li-title {
    border-radius: 4px 4px 0 0;
    padding: 16px;
    background-color: #f5f5f5;
    font-weight: bold;
    font-family: inherit;
    font-size: 24px;
    line-height: 1.1;
  }


  .li-content-border {
    padding: 16px;

    .li-content {
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 14px;
      color: #666;
      line-height: 2;


      .note {
        width: calc(100% - 120px);
        cursor: pointer;
        overflow: hidden;
        /* 隐藏溢出的内容 */
        white-space: nowrap;
        /* 不允许文本换行 */
        text-overflow: ellipsis;
        /* 使用省略号表示文本溢出 */
      }

      .time {
        width: 80px;
        text-align: right;
      }
    }
  }
}

@media (max-width: 1024px) {
  .chart-wrapper {
    padding: 8px;
  }
}
</style>
